doctype html
html(lang="en")
head
    meta(charset="UTF-8")
    title Calendar | 一个简单实用的 JavaScript 日历控件！
    meta(name="description" content="一个简单实用的 JavaScript 日历控件！原生 JavaScript 编写，不依赖任何第三方库。支持日期、月份和年份试图切换；支持单选、多选、范围和星期选择模式；界面简介、配置简单、使用方便！")
    meta(name="twitter:description" content="JavaScript,Calendar,calendar.js")
    link(href="css/calendar.css" rel="stylesheet" type="text/css")
    style.
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            font-size: 13px;
            background-color: #fff;
        }

        .title {
            margin: 0 2em;
            text-align: center;
            height: 80px;
            line-height: 80px;
            font-family: Georgia, Arial, sans-serif;
            overflow: hidden;
        }

        .version {
            font-size: 14px;
        }

        .calendar {
            position: relative;
            z-index: 1;
            margin: 0 2em 2em;
            padding: 2em;
            box-sizing: border-box;
            box-shadow: 0 0 15px #ddd;
            font-family: 'Microsoft YaHei UI', Arial, sans-serif;
            overflow: hidden;
        }

        .feature {
            margin: 0 auto;
            padding: 0 15px;
            font-weight: 500;
            overflow: hidden;
        }

        .demo {
            position: relative;
            z-index: 1;
            margin: 1.5em auto;
            height: 360px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
        }

        .demo-example,
        .demo-usage {
            position: relative;
            z-index: 1;
            float: left;
            width: 50%;
            padding: 15px;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .demo-example:after {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            height: 100%;
            width: 1px;
            background-color: #ddd;
            overflow: hidden;
            content: ' ';
        }

        .demo-pre {
            height: 100%;
            padding: 15px;
            background-color: #f8f8f8;
            box-sizing: border-box;
            overflow: auto;
        }

        .demo-pre:hover {
            background-color: #f1f1f1;
        }

        .demo-code {
            line-height: 150%;
            font-size: 14px;
            font-family: 'Courier New', Consolas, 'Microsoft YaHei UI', Arial, sans-serif;
        }
body
    h1.title
        | Calendar.js
        sup.version v0.0.1

    div.calendar
        h2.feature 日期试图模式
        div.demo
            div#dates-view.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          // 设置显示位置
                          parent: 'dates-view',
                          // 初始化显示时间
                          time: '2019-6-11',
                          // viewMode：
                          // 0 - 日期模式（默认值）
                          viewMode: 0,
                          // 配置日期选择的事件处理器 onDatePick，参数如下：
                          // time - 选中的日期时间
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onDatePick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择DOM：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 月份试图模式
        div.demo
            div#months-view.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          parent: 'months-view',
                          // 设置月份
                          time: '2019-7',
                          // viewMode：
                          // 1 - 月份模式
                          viewMode: 1,
                          // 配置月份选择的事件处理器 onMonthPick，参数如下：
                          // time - 选中的日期时间
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onMonthPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择DOM：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 年代试图模式
        div.demo
            div#years-view.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          parent: 'years-view',
                          // 设置年份
                          time: '2021',
                          // viewMode：
                          // 1 - 年代模式
                          viewMode: 2,
                          // 配置月份选择的事件处理器 onYearPick，参数如下：
                          // time - 选中的日期时间
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onYearPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择DOM：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 单选模式
        div.demo
            div#single-pick.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          // 设置显示位置
                          parent: 'single-pick',
                          // 初始化显示时间（默认选中时间）
                          time: '2019-6-18',
                          // viewMode：
                          // 0 - 日期模式（默认值）
                          viewMode: 0,
                          // pickMode：
                          // single - 单选模式
                          pickMode: 'single',
                          // 配置日期选择的事件处理器 onDatePick，参数如下：
                          // time - 选中的日期时间
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onDatePick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择的 DOM 节点：', $el)
                            console.log('日历实例：', calendar)
                          },
                          // 配置今天选择的事件处理器 onTodayPick，参数如下：
                          // 1. 先切换到日期试图模式；
                          // 2. 触发日期选择的业务逻辑；
                          onTodayPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择的 DOM 节点：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 多选模式
        div.demo
            div#multiple-pick.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          // 设置显示位置
                          parent: 'multiple-pick',
                          // 初始化显示时间（默认选中时间）
                          time: '2019-6-19',
                          // viewMode：
                          // 0 - 日期模式（默认值）
                          viewMode: 0,
                          // pickMode：
                          // multiple - 多选模式
                          pickMode: 'multiple',
                          // 配置日期选择的事件处理器 onDatePick，参数如下：
                          // time - 选中的多个日期（已排序）时间
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onDatePick: function (time, $el, calendar) {
                            console.log('选择时间：' + time)
                            console.log('选择的 DOM 节点：' + $el)
                            console.log('日历实例：' + calendar)
                          },
                          // 配置今天选择的事件处理器 onTodayPick，参数如下：
                          // 1. 先切换到日期试图模式；
                          // 2. 触发日期选择的业务逻辑；
                          onTodayPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择的 DOM 节点：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 范围选择模式
        div.demo
            div#range-pick.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          // 设置显示位置
                          parent: 'range-pick',
                          // 初始化显示时间（默认选中时间）
                          time: '2019-6-20',
                          // viewMode：
                          // 0 - 日期模式（默认值）
                          viewMode: 0,
                          // pickMode：
                          // range - 多选模式
                          pickMode: 'range',
                          // 配置日期选择的事件处理器 onDatePick，参数如下：
                          // time - 选中的日期时间范围
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onDatePick: function (time, $el, calendar) {
                            console.log('选择时间：' + time)
                            console.log('选择的 DOM 节点：' + $el)
                            console.log('日历实例：' + calendar)
                          },
                          // 配置今天选择的事件处理器 onTodayPick，参数如下：
                          // 1. 先切换到日期试图模式；
                          // 2. 触发日期选择的业务逻辑；
                          onTodayPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择的 DOM 节点：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
        h2.feature 星期选择模式
        div.demo
            div#week-pick.demo-example
            dov.demo-usage
                pre.demo-pre
                    code.demo-code.
                        new Calendar({
                          // 设置显示位置
                          parent: 'week-pick',
                          // 初始化显示时间（默认选中时间）
                          time: '2019-6-21',
                          // viewMode：
                          // 0 - 日期模式（默认值）
                          viewMode: 0,
                          // pickMode：
                          // week - 多选模式
                          pickMode: 'week',
                          // 配置日期选择的事件处理器 onDatePick，参数如下：
                          // time - 选中的日期时间范围
                          // $el - 点击的 DOM 节点
                          // calendar - 日历控件的实例
                          onDatePick: function (time, $el, calendar) {
                            console.log('选择时间：' + time)
                            console.log('选择的 DOM 节点：' + $el)
                            console.log('日历实例：' + calendar)
                          },
                          // 配置今天选择的事件处理器 onTodayPick，参数如下：
                          // 1. 先切换到日期试图模式；
                          // 2. 触发日期选择的业务逻辑；
                          onTodayPick: function (time, $el, calendar) {
                            console.log('选择时间：', time)
                            console.log('选择的 DOM 节点：', $el)
                            console.log('日历实例：', calendar)
                          }
                        })
    script(src="js/calendar.js" type="text/javascript")
    script.
      (function () {
        let calDates = new Calendar({
          // 设置显示位置
          parent: 'dates-view',
          // 初始化显示时间
          time: '2019-6-11',
          // viewMode：
          // 0 - 日期模式（默认值）
          viewMode: 0,
          // 配置日期选择的事件处理器 onDatePick，参数如下：
          // time - 选中的日期时间
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onDatePick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择DOM：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calMonths = new Calendar({
          parent: 'months-view',
          // 设置月份
          time: '2019-7',
          // viewMode：
          // 1 - 月份模式
          viewMode: 1,
          // 配置月份选择的事件处理器 onMonthPick，参数如下：
          // time - 选中的日期时间
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onMonthPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择DOM：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calYears = new Calendar({
          parent: 'years-view',
          // 设置年份
          time: '2021',
          // viewMode：
          // 1 - 年代模式
          viewMode: 2,
          // 配置月份选择的事件处理器 onYearPick，参数如下：
          // time - 选中的日期时间
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onYearPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择DOM：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calSingle = new Calendar({
          // 设置显示位置
          parent: 'single-pick',
          // 初始化显示时间（默认选中时间）
          time: '2019-6-18',
          // viewMode：
          // 0 - 日期模式（默认值）
          viewMode: 0,
          // pickMode：
          // single - 单选模式
          pickMode: 'single',
          // 配置日期选择的事件处理器 onDatePick，参数如下：
          // time - 选中的日期时间
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onDatePick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择的 DOM 节点：', $el)
            console.log('日历实例：', calendar)
          },
          // 配置今天选择的事件处理器 onTodayPick，参数如下：
          // 1. 先切换到日期试图模式；
          // 2. 触发日期选择的业务逻辑；
          onTodayPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择的 DOM 节点：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calMultiple = new Calendar({
          // 设置显示位置
          parent: 'multiple-pick',
          // 初始化显示时间（默认选中时间）
          time: '2019-6-19',
          // viewMode：
          // 0 - 日期模式（默认值）
          viewMode: 0,
          // pickMode：
          // multiple - 多选模式
          pickMode: 'multiple',
          // 配置日期选择的事件处理器 onDatePick，参数如下：
          // time - 选中的多个日期（已排序）时间
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onDatePick: function (time, $el, calendar) {
            console.log('选择时间：' + time)
            console.log('选择的 DOM 节点：' + $el)
            console.log('日历实例：' + calendar)
          },
          // 配置今天选择的事件处理器 onTodayPick，参数如下：
          // 1. 先切换到日期试图模式；
          // 2. 触发日期选择的业务逻辑；
          onTodayPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择的 DOM 节点：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calRange = new Calendar({
          // 设置显示位置
          parent: 'range-pick',
          // 初始化显示时间（默认选中时间）
          time: '2019-6-20',
          // viewMode：
          // 0 - 日期模式（默认值）
          viewMode: 0,
          // pickMode：
          // range - 多选模式
          pickMode: 'range',
          // 配置日期选择的事件处理器 onDatePick，参数如下：
          // time - 选中的日期时间范围
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onDatePick: function (time, $el, calendar) {
            console.log('选择时间：' + time)
            console.log('选择的 DOM 节点：' + $el)
            console.log('日历实例：' + calendar)
          },
          // 配置今天选择的事件处理器 onTodayPick，参数如下：
          // 1. 先切换到日期试图模式；
          // 2. 触发日期选择的业务逻辑；
          onTodayPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择的 DOM 节点：', $el)
            console.log('日历实例：', calendar)
          }
        })

        let calWeek = new Calendar({
          // 设置显示位置
          parent: 'week-pick',
          // 初始化显示时间（默认选中时间）
          time: '2019-6-21',
          // viewMode：
          // 0 - 日期模式（默认值）
          viewMode: 0,
          // pickMode：
          // week - 多选模式
          pickMode: 'week',
          // 配置日期选择的事件处理器 onDatePick，参数如下：
          // time - 选中的日期时间范围
          // $el - 点击的 DOM 节点
          // calendar - 日历控件的实例
          onDatePick: function (time, $el, calendar) {
            console.log('选择时间：' + time)
            console.log('选择的 DOM 节点：' + $el)
            console.log('日历实例：' + calendar)
          },
          // 配置今天选择的事件处理器 onTodayPick，参数如下：
          // 1. 先切换到日期试图模式；
          // 2. 触发日期选择的业务逻辑；
          onTodayPick: function (time, $el, calendar) {
            console.log('选择时间：', time)
            console.log('选择的 DOM 节点：', $el)
            console.log('日历实例：', calendar)
          }
        })
      })()